<template>
  <div class="list-container">
    <NavBar />
    <el-form ref="form" :model="form" label-width="200px" v-loading="loading">
      <el-form-item label="名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="appkey">
        <el-input disabled v-model="form.appkey"></el-input>
      </el-form-item>
      <el-form-item label="安卓包名">
        <el-input v-model="form.package_name"></el-input>
      </el-form-item>

      <el-form-item label="是否自定义落地页">
        <el-switch v-model="form.is_custom_landing" active-text="是" inactive-text="否"></el-switch>
      </el-form-item>

      <el-form-item label="自定义发行地址">
        <el-input v-model="form.custom_distribution_url" placeholder="如未上架应用市场时跳转的备用地址"></el-input>
      </el-form-item>

      <el-form-item label="应用描述">
        <el-input v-model="form.description" type="textarea" rows="4" placeholder="用于展示与统计的应用简介"></el-input>
      </el-form-item>

      <el-form-item label="应用商店">
        <el-checkbox-group v-model="form.stores">
          <el-checkbox label="appstore">苹果App Store</el-checkbox>
          <el-checkbox label="googleplay">Google Play</el-checkbox>
          <el-checkbox label="huawei">华为应用市场</el-checkbox>
          <el-checkbox label="xiaomi">小米应用商店</el-checkbox>
          <el-checkbox label="vivo">vivo应用商店</el-checkbox>
          <el-checkbox label="oppo">OPPO应用市场</el-checkbox>
          <el-checkbox label="honour">荣耀应用市场</el-checkbox>
          <el-checkbox label="yyb">应用宝</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item v-if="form.stores.includes('appstore')" label="App Store应用ID">
        <el-input v-model="form.appstore_id" placeholder="如: id1234567890">
          <template #append>
            <el-tooltip content="在App Store Connect中获取应用的Apple ID" placement="top">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item v-if="form.stores.includes('appstore')" label="App Store链接">
        <el-input v-model="form.appstore_down_url" placeholder="https://apps.apple.com/app/id1234567890">
          <template #append>
            <el-tooltip content="App Store中应用的完整URL地址" placement="top">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item v-if="form.stores.includes('googleplay')" label="Google Play链接">
        <el-input v-model="form.googleplay_down_url" placeholder="https://play.google.com/store/apps/details?id=com.example.app">
          <template #append>
            <el-tooltip content="Google Play中应用的完整URL地址" placement="top">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item v-if="form.stores.includes('huawei')" label="华为应用市场链接">
        <el-input v-model="form.huawei_down_url" placeholder="https://appgallery.huawei.com/#/app/C123456">
          <template #append>
            <el-tooltip content="华为应用市场中应用的完整URL地址" placement="top">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item v-if="form.stores.includes('xiaomi')" label="小米应用商店链接">
        <el-input v-model="form.xiaomi_down_url" placeholder="https://app.mi.com/detail/123456">
          <template #append>
            <el-tooltip content="小米应用商店中应用的完整URL地址" placement="top">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item v-if="form.stores.includes('vivo')" label="vivo应用商店链接">
        <el-input v-model="form.vivo_down_url" placeholder="https://dev.vivo.com.cn/appinfo?appId=123456">
          <template #append>
            <el-tooltip content="vivo应用商店中应用的完整URL地址" placement="top">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item v-if="form.stores.includes('oppo')" label="OPPO应用市场链接">
        <el-input v-model="form.oppo_down_url" placeholder="https://store.oppomobile.com/product/123456.html">
          <template #append>
            <el-tooltip content="OPPO应用市场中应用的完整URL地址" placement="top">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item v-if="form.stores.includes('honour')" label="荣耀应用市场链接">
        <el-input v-model="form.honour_down_url" placeholder="https://appgallery.huawei.com/#/app/C123456">
          <template #append>
            <el-tooltip content="荣耀应用市场中应用的完整URL地址" placement="top">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item v-if="form.stores.includes('yyb')" label="应用宝链接">
        <el-input v-model="form.yyb_down_url" placeholder="https://sj.qq.com/myapp/detail.htm?apkName=com.example.app">
          <template #append>
            <el-tooltip content="应用宝中应用的完整URL地址" placement="top">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="icon">
        <el-input v-model="form.icon"></el-input>
      </el-form-item>
      <el-form-item label="banner">
        <el-input v-model="form.banner"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="gotoConsole">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { appDetailApi, appsUpdateApi } from '@/api/apps';
import NavBar from '@/components/NavBarEnhanced.vue';
import { QuestionFilled } from '@element-plus/icons-vue';
export default {
  components: {
    NavBar,
    QuestionFilled
  },
  data() {
    return {
      id: '',
      loading: false,
      form: {
          name: '',
          appkey: '',
          package_name: '',
          icon: '',
          banner: '',
          is_custom_landing: false,
          custom_distribution_url: '',
          description: '',
          stores: [],
          appstore_id: '',
          appstore_down_url: '',
          googleplay_down_url: '',
          huawei_down_url: '',
          xiaomi_down_url: '',
          vivo_down_url: '',
          oppo_down_url: '',
          honour_down_url: '',
          yyb_down_url: ''
      }
    };
  },
  created() {
    this.id = this.$route.query.id;
    if (!this.id) {
      this.$message.error('应用ID不能为空');
      this.gotoConsole();
      return;
    }
    this.getAppDetails();
  },
  methods: {
    async getAppDetails() {
      try {
        this.loading = true;
        let res = await appDetailApi(this.id);
        if (res.code !== 200) {
          throw new Error(res.msg || '获取应用详情失败');
        }
        this.form = { ...res.data };
      } catch (error) {
        this.$message.error(error.message);
      } finally {
        this.loading = false;
      }
    },
    gotoConsole(){
      this.$router.push('/console');
    },
    async onSubmit(){
      if(!this.form.name){
        return this.$message.error('请输入应用名称');
      }
      if(this.form.stores.length === 0){
        return this.$message.error('请至少选择一个应用商店');
      }

      // 验证已选应用商店的 URL
      for (const store of this.form.stores) {
        if (store === 'appstore') {
          if (!this.form.appstore_id) {
            return this.$message.error('请输入App Store应用ID');
          }
          if (!this.form.appstore_down_url) {
            return this.$message.error('请输入App Store链接');
          }
        } else {
          const urlKey = `${store}_down_url`;
          if (!this.form[urlKey]) {
            return this.$message.error(`请输入${store}应用商店的链接`);
          }
        }
      }

      let res = await appsUpdateApi(this.id,this.form);
      if(res.code != 200){
        return this.$message.error(res.msg);
      }
      this.$message.success('保存成功');
      this.gotoConsole();
    }
  },
  watch: {
    'form.stores': {
      handler(newStores) {
        // 当取消选中某个商店时，清空对应的 URL
        const allStores = ['appstore', 'googleplay', 'huawei', 'xiaomi', 'vivo', 'oppo', 'honour', 'yyb'];
        allStores.forEach(store => {
          if (!newStores.includes(store)) {
            if (store === 'appstore') {
              this.form.appstore_id = '';
              this.form.appstore_down_url = '';
            } else {
              this.form[`${store}_down_url`] = '';
            }
          }
        });
      },
      deep: true
    }
  }
};
</script>

<style scoped>
.list-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table {
  width: 100%;
  border-collapse: collapse;
}

</style>